<template>
  <div style="color: #666666">
    <!--标题-->
    <div style="margin: 10px 0">
      <div style="padding: 10px 0;border-bottom: 1px dashed #eeeeee;" :key="article.id">
        <div class="pd-10" style="font-size: 20px;color: #3F5EF8">{{ article.name }}</div>
        <div style="font-size: 14px;margin-top: 10px;">
          <i class="el-icon-user-solid"></i>
          <span>{{ article.user }}</span>

          <i class="el-icon-time" style="margin-left: 20px"></i>
          <span>{{ article.time }}</span>
        </div>
      </div>
    </div>
    <!--内容-->
    <div style="margin-bottom: 30px">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="true"
          :editable="false"
          :scorllStyle="true"
          :ishljs="true" />
    </div>
    <!--评论区域-->
    <div style="margin: 30px 0;">
      <div>
        <div style="border-bottom: 1px solid orangered;padding: 10px 0;font-size: 20px;">评论</div>
        <!--评论框-->
        <div style="padding: 10px 0;">
          <el-input type="textarea" v-model="commentForm.content"></el-input>
        </div>
        <!--按钮-->
        <div class="pd-10" style="text-align: right">
          <el-button type="primary" size="small" @click="save">评论</el-button>
        </div>
      </div>
    </div>
    <!--评论列表-->
    <div>
      <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #cccccc;padding: 10px 0;">
        <!--一级评论-->
        <div style="display: flex;">
          <!--头像-->
          <div style="width: 100px;">
            <el-image :src="item.avatar" style="width: 50px;height: 50px;border-radius: 50%;"></el-image>
          </div>
          <!--内容-->
          <div style="flex: 1;font-size: 14px;padding: 5px 0;line-height: 25px">
            <b>{{ item.username }}：</b>
            <span>{{ item.content }}</span>
            <div style="display: flex;line-height: 20px;margin-top: 5px;">
              <div style="width: 200px;">
                <i class="el-icon-time"></i><span style="margin-left: 5px;">{{ item.time }}</span>
              </div>
              <div style="text-align: right;flex: 1;">
                <el-button type="text" style="margin-left: 5px;" @click="handleReply(item.id)">回复</el-button>
                <el-button type="text" style="color: red;" @click="del(item.id)" v-if="user.id === item.userId">删除</el-button>
              </div>
            </div>
          </div>
        </div>
        <!--子评论-->
        <div v-if="item.children.length" style="padding-left: 150px;">
          <!--回复列表-->
          <div v-for="subItem in item.children" :key="subItem.id" style="background-color: #F0F0F0;padding: 5px 20px;">
            <div style="font-size: 14px;padding: 5px 0;line-height: 25px">
              <div>
                <b style="color: #3a8ee6;" v-if="subItem.pusername">@{{ subItem.pusername }}</b>
              </div>
              <div style="padding-left: 5px;">
                <b>{{ subItem.username }}：</b>
                <span>{{ subItem.content }}</span>
              </div>
              <div style="display: flex;line-height: 20px;margin-top: 5px;padding-left: 5px;">
                <div style="width: 200px;">
                  <i class="el-icon-time"></i><span style="margin-left: 5px;">{{ subItem.time }}</span>
                </div>
                <div style="text-align: right;flex: 1;">
                  <el-button type="text" style="margin-left: 5px;" @click="handleReply(subItem.id)">回复</el-button>
                  <el-button type="text" style="color: red;" @click="del(subItem.id)" v-if="user.id === subItem.userId">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--回复弹出框-->
    <el-dialog title="回复" :visible.sync="dialogFormVisible" width="50%">
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容" label-width="80px">
          <el-input v-model="commentForm.commentReply" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ArticleDetail",
  data() {
    return {
      article: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      comments: [],
      commentForm: {},
      id: this.$route.query.id,
      dialogFormVisible: false
    }
  },
  methods: {
    load() {
      this.request.get("/article/" + this.id).then(res => {
        this.article = res.data
      })
    },
    loadComment() {
      //获取tree型数据
      this.request.get("/comment/tree/" + this.id).then(res => {
        this.comments = res.data
      })
    },
    save() {
      //先判断是否登录
      if (!this.user.id) {
        this.$message.warning("请先登录后再操作")
        return
      }
      //为了不影响前端评论框，以及匹配后端
      if (this.commentForm.commentReply) {
        this.commentForm.content = this.commentForm.commentReply
      }
      this.commentForm.articleId = this.id
      this.request.post("/comment/save",this.commentForm).then(res => {
        if (res.code === "200") {
          this.dialogFormVisible = false
          this.$message.success("评论成功")
          this.commentForm = {}
          this.loadComment()
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      this.request.delete("/comment/"+id).then(res => {
        if (res.code === "200") {
          this.$message.success("删除成功")
          this.loadComment()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleReply(pid) {
      this.commentForm = {pid: pid}
      this.dialogFormVisible = true
    }
  },
  created() {
    this.load()
    this.loadComment()
  }
}
</script>

<style scoped>

</style>